<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IPCLiveServer</title>
    <link rel="icon" href="favicon.png">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="mpegts.js"></script>
</head>

<body>

<div class="main-container">
    <div class="url-input-container">
        <label for="url">URL</label>
        <input id="url" type="text" placeholder="请输入 RTSP 或 RTMP 视频流地址"/>
        <button onclick="player_start()">播放</button>
    </div>
    <div class="video-container">
        <video name="video-element" muted autoplay></video>
    </div>
<textarea rows="11" readonly>

  IPCLiveServer：RTSP、RTMP 流媒体网页直播服务

  支持任意的 RTSP 或 RTMP 协议的视频流

  实现了 HTTP-FLV 和 WS-FLV 两种传输协议

  无需安装插件，兼容大部分浏览器

  超低延迟，追帧播放，实时更新
</textarea>
</div>

<script>

    document.addEventListener('DOMContentLoaded', function () {
        if (!mpegts.getFeatureList().mseLivePlayback) {
            alert('抱歉，您的浏览器不支持此功能。请尝试使用其他浏览器或升级您的浏览器版本。');
            window.location.href = "about:blank";
        }
    });

    function player_start() {
        const inputElement = document.querySelector('#url');
        if (!inputElement.value.toLowerCase().startsWith('rtmp') && !inputElement.value.toLowerCase().startsWith('rtsp')) {
            alert('请输入正确的视频流地址');
            inputElement.value = '';
            return;
        }
        const videoElement = document.querySelector('video[name="video-element"]');
        // If you use the HTTP-FLV protocol
        const serverUrl = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/IPCLiveServer/live?url=' + inputElement.value;
        // If you use the WS-FLV protocol
        //const serverUrl = 'ws://' + window.location.hostname + ':' + window.location.port + '/IPCLiveServer/websocket/live?' + inputElement.value;
        if (typeof player !== 'undefined') {
            if (player != null) {
                player_destroy();
            }
        }
        player = mpegts.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            hasVideo: true,
            url: serverUrl
        }, {
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            liveBufferLatencyChasing: true,
            autoCleanupSourceBuffer: true,
            autoCleanupMaxBackwardDuration: 20,
            autoCleanupMinBackwardDuration: 10
        });
        mpegts.LoggingControl.enableAll = false;
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }

    function player_destroy() {
        player.unload();
        player.detachMediaElement();
        player.destroy();
        player = null;
    }

</script>

</body>

</html>